<template>
  <el-container class="layout">
    <v-plain-header>
      <span class="message" @click="$router.push('/message/system')"> <i class="iconfont icon-tixing"></i> 提醒</span>
      <el-dropdown @command="dropListMethods" trigger="click" class="dropdown">
                <span>
              {{roleName}}  &nbsp;&nbsp;     {{userInfo.username}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="item.command" v-for="item in dropList" :key="item.command">
            {{item.label}}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </v-plain-header>
    <el-container class="main pd-10">
      <el-aside width="auto">
        <v-plain-menu :menus="menus" />
      </el-aside>
      <el-main>
        <v-plain-bread />
        <router-view></router-view>
      </el-main>
    </el-container>
    <v-plain-footer />
  </el-container>
</template>
<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import vPlainMenu from '@/components/plain-menu'
  import vPlainHeader from '@/components/plain-header'
  import vPlainFooter from '@/components/plain-footer'
  import vPlainBread from '@/components/plain-bread'
  import { Getter, Mutation } from 'vuex-class'

  @Component(
    {
      components: {
        vPlainMenu, vPlainHeader, vPlainFooter, vPlainBread
      }
    }
  )
  export default class Layout extends Vue {
    menus = [
      {
        name: '主页',
        url: '/home',
        icon: 'icon-shouye'
      },
      {
        name: '业务员管理',
        url: '/salesmen'
      },
      {
        name: '企业管理',
        url: '/member'
      }
    ]
    dropList = [
      {
        command: '/user-center/base',
        label: '基本资料'
      },
      {
        command: '/user-center/safe',
        label: '安全设置'
      },
      {
        command: '/user-center/auth',
        label: '实名认证'
      },
      {
        command: 'exit',
        label: '退出登录'
      }
    ]
    @Getter userInfo
    @Mutation removeUserInfo
    @Mutation makeBreadList

    async exit () {
      let res: AjaxResponse = await this.$axios.post('b/boms/user/logout')
      this.removeUserInfo()
      this.$utils.tips(res)
      this.$router.push('/login')
    }

    get roleName () {
      return this.$utils.toTypeFormat(JSON.parse(window.sessionStorage.getItem('userInfo')).roleType, this.$dict.roleTypes)
    }

    dropListMethods (command) {
      switch (command) {
        case  'exit':
          this.exit()
          break
        default :
          this.$router.push(command)
      }
    }

    mounted () {
      switch (this.userInfo.roleType) {
        case 5 : //渠道商
          this.menus[0].url = '/home/channel'
          break
        case 7 : // 渠道商
          this.menus[0].url = '/home/channel'
          break
        case 4 :  // 渠道yewuyuan
          this.menus[0].url = '/home/channel-salesman'
          this.menus = this.menus.filter(v => v.url !== '/salesmen')
          break
        case 8 : // 渠道yewuyuan
          this.menus[0].url = '/home/channel-salesman'
          this.menus = this.menus.filter(v => v.url !== '/salesmen')
          break
      }
      if (this.userInfo.roleType === 5 || this.userInfo.roleType === 7) {
        if (this.userInfo.userStatus !== 1) {
          this.menus = []
        }
      }
      if (this.$route.path === '/home') {
        this.$router.replace(this.menus[0].url)
      }

      this.$router.afterEach((to, form) => {
        this.makeBreadList(this)
      })
    }
  }
</script>

<style lang="less" scoped>
  .layout {
    height: 100vh;
    flex-direction: column;
  }

  .main {
    flex: 1;
    display: flex;
    background: #f0f2f5;
  }

  .el-main {
    padding: 0 10px;
    min-width: 1200px;
    display: flex;
    flex-direction: column;
  }

  .message {
    color: #666;
    font-size: 18px;
    margin-right: 20px;
    cursor: pointer;
  }
  .dropdown{
    cursor: pointer;
  }
</style>
<style lang="less">
  .edit-el-intput-suffix{
    margin-right: 578px;
  }
</style>

